<template lang="pug">
//- 楼层项编辑
el-dialog(title="增加楼层项" :visible.sync="newadd" :before-close="close" append-to-body)
    goodslist(@getgoodsid="getgooditem")
    el-form(:v-model="f" label-position="right" label-width="80px" :rules="louceng")
        el-form-item(label="广告图片")
            el-upload(drag action="http://up-z0.qiniu.com" :data="uploadData"
            :file-list="fileDetailUploadList" :on-success="handleDetailUploadSuccess"
            :on-remove="handleDetailRemove" :on-error="handleUploadError" :before-upload="handleBeforUpload"
            list-type="picture-card")
                .el-upload__text 将文件拖到此处，或
                    em 点击上传
                .el-upload__tip(slot="tip") 只能上传jpg/png文件，且不超过500kb
        el-form-item.is-required(label="排序" prop="spec")
            el-input(v-model.number="f.spec" auto-complete="off")
        el-form-item(label="链接类型")
            el-radio-group(v-model="c" @change="clt")
                // el-radio-button(label="URL")
                el-radio-button(label="商品")
                // el-radio-button(label="分类")
        // el-form-item(label="链接地址" v-if="n1")
        //     el-input(v-model="f.url")
        el-form-item(label="关联商品" )
            el-input(v-model="g" readonly style="width:50%")
            el-button(@click="chagegoods") 选择商品
        // el-form-item(label="选择分类" v-if="n3")
        //     el-select(v-model="f.k" placeholder="请选择分类")
        //         el-option(v-for="i in gkopt" :key="i.gcId" :label="i.gcName" :value="i.gcId")
    .dialog-footer(slot="footer")
        el-button(@click="close") 取消
        el-button(type="primary" @click="save") 确定
</template>
<script>
import goodslist from 'components/goodslist'
    export default{
        data(){
            return{
                n1:true,
                n2:false,
                n3:false,
                newadd:false,
                linktype:0,
                c:'商品',
                g:0,
                f:{},
                uploadData: {
                    key: '',
                    token: ''
                },
                fileDetailUploadList:[],
                gkopt:[],
                thisid:-1,
                floorId:-1,
                // louceng:{
                //     spec:[
                //         { required: true, message: '排序不能为空', trigger: 'blur' }
                //     ]
                // }
            }
        },
        components:{
            goodslist
        },
        computed:{
            getstate(){
                return this.$store.state.flootgoodlistclass2;
            },
            getchange(){
                return this.$store.state.floorgoodlist2;
            }
        },
        watch:{
            getstate(v){//打开弹窗
                this.f={}
                this.newadd=v
                this.getgoodkind()
            },
            getchange(v){//获取数据
                this.f={}
                if(typeof(v)=="number"){
                    this.floorId=v
                    this.fileDetailUploadList=[]
                    // console.log("new",this.floorId)
                }else if(typeof(v)=="object"&&v.floorId!=undefined){
                    this.floorId=v.floorId
                    this.thisid=v.floorItemId
                    this.f.spec=v.sort
                    this.fileDetailUploadList=[]
                    this.fileDetailUploadList.push({
                        name: '',
                        url: v.imageUrl
                    }),
                    this.f.sort=v.sort
                    if(v.type==1){
                        this.c="商品"
                        this.clt("商品")
                        this.g=v.itemObject
                    }else if(v.type==2){
                        this.c="URL"
                        this.clt("URL")
                        this.f.url=v.itemUrl
                    }else if(v.type==3){
                        this.c="分类"
                        this.clt("分类")
                        this.f.k=v.itemObject
                    }
                }
            }
        },
        methods:{
            clt(v){//显示相应的项目
                switch(v){
                    case 'URL':
                        this.n1=true
                        this.n2=false
                        this.n3=false
                        break;
                    case '商品':
                        this.n1=false
                        this.n2=true
                        this.n3=false
                        break;
                    case '分类':
                        this.n1=false
                        this.n2=false
                        this.n3=true
                        break;
                }
            },
            close(){//关闭,清空数据
                this.fileDetailUploadList=[]
                this.thisid=-1
                this.g=0
                this.$store.state.flootgoodlistclass2=false
                this.$store.state.floorgoodlist2={}
            },
            qiniuyunup(_vm, file, rule) {
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                const isFitSize = rule.maxSize ? file.size / 1024 / 1024 < rule.maxSize : 'undefined';
                if (rule.isJPG || rule.isPNG) {
                    if (!isJPG && !isPNG) {
                        _vm.$message.error('图片只能是 JPG/PNG 格式!');
                        return false
                    }
                }
                if (isFitSize != 'undefined' && !isFitSize) {
                    _vm.$message.error('大小不能超过 ' + rule.maxSize + 'MB!');
                    return false
                }
            },
            handleDetailUploadSuccess(response, file, fileList) {
                var newFile = {
                    name: file.name,
                    url: window.qiniuHost + response.key
                }
                this.fileDetailUploadList = []
                this.fileDetailUploadList.push(newFile)
            },
            handleDetailRemove(){
                this.fileDetailUploadList = []
            },
            handleUploadError(error, file, fileList) {
                const _this = this
                _this.$message.error('上传失败')
            },
            handleBeforUpload(file) {
                // console.log("file",file)
                const _this = this
                let rule = {
                    isJPG: true,
                    isPNG: true,
                    maxSize: 2
                }
                var suffix = file.name.split('.')
                this.uploadData.key = new Date().getTime() + '.' + suffix[1]
                this.uploadData.token = this.$store.state.qiniuToken
                return this.qiniuyunup(_this, file, rule)
            },
            chagegoods(){//打开获取单个商品的弹窗
                this.$store.commit('ChangeWxGood')
            },
            getgooditem(m){//获取到商品的id
                // console.log("getgooditem",m)
                this.g=""
                this.g=m
            },
            getgoodkind(){//获取商品分类的列表
                var _this=this
                axios.get('/listXcxGoodsClass.do').then(r=>{
                    // console.log(r.data)
                    if(r.data.code!=200){
                        return
                    }
                    _this.gkopt=[].concat(r.data.response.xcxGoodsClassList)
                })
            },
            save(){//保存
                var _this=this
                var pa=new URLSearchParams()
                if(this.fileDetailUploadList[0].url=='' ||this.fileDetailUploadList[0].url==undefined){
                    this.$message({
                        message:'请上传图片',
                        type:'info'
                    })
                    return
                }
                pa.append('imageUrl',this.fileDetailUploadList[0].url)
                pa.append('floorId',this.floorId)
                
                if(this.c=='URL'){
                    pa.append('type',2)
                    if(this.f.url==''){
                        this.$message({
                            message:"请填写URL",
                            type:'info'
                        })
                        return
                    }
                    pa.append('itemUrl',this.f.url)
                }else if(this.c=='商品'){
                    pa.append('type',1)
                    if(this.g==''){
                        this.$message({
                            message:"请添加商品",
                            type:"info"
                        })
                        return
                    }
                    pa.append('itemObject',this.g)
                }else if(this.c=='分类'){
                    pa.append('type',3)
                    if(this.f.k==''){
                        this.$message({
                            message:'请选择商品类型',
                            type:'info'
                        })
                        return
                    }
                    pa.append('itemObject',this.f.k)
                }
                pa.append('sort',this.f.spec)
                
                

                if(this.thisid==-1){//新增
                    axios.get('/saveFloorItem.do',{params:pa}).then(r=>{
                        // console.log("新增",r)
                        if(r.data.code==200){
                            this.$message({
                                message:"新增成功",
                                type:'success'
                            })
                            _this.$store.state.floor=false
                            _this.close()
                        }else{
                            this.$message({
                                message:r.data.message,
                                type:'error'
                            })
                        }
                    })
                }else{
                    pa.append('floorItemId',this.thisid)
                    axios.get('/updateByFloorItemId.do',{params:pa}).then(r=>{
                        // console.log("修改",r)
                        if(r.data.code==200){
                            this.$message({
                                message:"修改成功",
                                type:'success'
                            })
                            _this.$store.state.floor=false
                            _this.close()
                        }else{
                            this.$message({
                                message:r.data.message,
                                type:'error'
                            })
                        }
                    })
                }
            }
        }
    }
</script>
<style>
.el-upload-dragger{
    height: 160px !important;
}
</style>